import React from 'react'
import { Col, Form, Input, Button, Select } from 'antd'
import '../batchRecord/search.css'
import '@/common/skin.css'

const FormItem = Form.Item
const { Option } = Select

const SignEdit = (props) => {

  const { getFieldDecorator } = props.form

  const { 
    onAdd, 
    industryEnum, 
    scenariosEnum, 
    addButtonLoading,
    onChangeSign,
    onChangeIndustry,
    onChangeScenarios,  
  } = props

  return (
    <Form>
      <FormItem labelCol={{span: 3}} wrapperCol={{span: 15}} label="签名">
        {getFieldDecorator('sign', {
            rules: [{ required: true, message: '请输入签名!' }],
        })(
          <Input onChange={onChangeSign} className="skin-text-area" placeholder="请输入签名" />
        )}
      </FormItem>
      <FormItem labelCol={{span: 3}} wrapperCol={{span: 15}} label="行业">
        {getFieldDecorator('industry', {
           rules: [{ required: true, message: '请输入行业!' }],
        })(
          <Select 
            style={{ width: 200 }}
            className="skin-select" 
            onChange={onChangeIndustry} 
          >
            {industryEnum.map(({index, desc}) => (<Option key={index} value={index + ''}>{desc}</Option>))} 
          </Select>
        )}
      </FormItem>
      <FormItem labelCol={{span: 3}} wrapperCol={{span: 15}} label="应用场景">
        {getFieldDecorator('scenarios', {
          rules: [{ required: true, message: '请输入应用场景!' }],
        })(
          <Select onChange={onChangeScenarios} className="skin-select" style={{ width: 200 }}>
            {scenariosEnum.map(({index, desc}) => <Option key={index} value={index + ''}>{desc}</Option>)} 
          </Select>
        )}
      </FormItem>
      <FormItem>
        <Col offset={3}>
          <Button type="primary" loading={addButtonLoading} style={{width: '100px'}} 
            onClick={() => props.form.validateFields((error) => !error && onAdd())}
          >提交签名</Button>
        </Col>
      </FormItem>
      <FormItem style={{marginTop: '80px'}} labelCol={{span: 3}} wrapperCol={{span: 15}} label="签名规范">
        <div>
          * 签名内容：公司或品牌名称，字数要求2-16个字符，不能使用空格和特殊符号"- + * & % # @ ~"等，运营商规定发送短信必须带签名<br />
          * 签名审核：签名将由人工审核后方可启用，填写的应用场景可视情况填写，至少填写一个，越详细真实的应用场景，审核通过概率越高<br />
          * 签名符号：无须在签名内容前后添加【】、()、[]，以避免重复<br />
          * 在线发送：发送时选择可用签名，默认前置，可选择后置，自带【】<br />
          * API发送：发送时默认带签名，如果您的短信通道为固定签名，内容中可选择不带签名，具体咨询您的客户经理通道配置属性<br />
          * 签名个数：账号默认启用一个签名，如需更多签名个数，请咨询您的客户经理
        </div>
      </FormItem>
    </Form>
  )
}

export default Form.create({
  mapPropsToFields(props){
    return {
      sign: Form.createFormField({ value: props.sign,  }),
      industry: Form.createFormField({ value: props.industry }),
      scenarios: Form.createFormField({ value: props.scenarios })
    }
  }
})(SignEdit)